import React, { Component } from "react";
import PropTypes from "prop-types";
import { Menu } from "antd";
import { Link } from 'react-router-dom'

import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;
class index extends Component {
    constructor() {
        super();
        this.state = {
            name: "这是主页面",
            current:'mail'
        };
        this.inputval = React.createRef();
    }

    componentDidMount() { 


    }

    handelok = async () => {
        let res = await this.http({
            type: "get",
            url: "https://api.apiopen.top/getJoke",
            params: {
                page: 1,
                count: 10,
                type: "video",
            },
        });
        console.log(res);
    };

    ActionKey = (e)=>{
        this.setState({
            current: e.key,
     });      
    }

    render() {
        return (
            
            <div className='home'>
                <div className='nav-bar'>
                    <Menu
                        onClick={this.ActionKey}
                        selectedKeys={[this.state.current]}
                        mode='horizontal'
                    >
                        <Menu.Item key='mail' icon={<MailOutlined />}>
                            <Link to='/layout/email'>邮箱</Link>
                        </Menu.Item>
                        <Menu.Item key='app'  icon={<AppstoreOutlined />}>
                        <Link to='/layout/app'>App</Link>
                        </Menu.Item>
                        <SubMenu
                            icon={<SettingOutlined />}
                            title='多选的'
                        >
                            <Menu.ItemGroup title='游戏目录'>
                                <Menu.Item key='1'>王者荣耀</Menu.Item>
                                <Menu.Item key='2'>和平精英</Menu.Item>
                            </Menu.ItemGroup>
                        </SubMenu>
                        <Menu.Item key='alipay'>
                             <Link  to = '/layout/params'> 跨级传参 </Link>
                        </Menu.Item>
                        <Menu.Item key='error'>
                             <Link  to = '/layout/error'> 错误边界 </Link>
                        </Menu.Item>
                    </Menu>
                    {  this.props.children }
                </div>
           </div>
        );
    }
}

index.propTypes = {
    title: PropTypes.string,
};

export default index;
